<template>
    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <span>文章列表</span>
            </div>
        </template>
        <el-table :data="data" style="width:100%">
            <el-table-column prop="id" label="#" width="60" />
            <el-table-column prop="title" label="标题" />
            <el-table-column prop="releaseData" label="发布日期" />
            <el-table-column prop="updateDate" label="更新日期" />
            <el-table-column label="操作" />
            <div>
                <el-button :icon="EditPen" size="small" type="primary" plain>编辑</el-button>
                <el-button :icon="Top" size="small" type="primary" plain>置顶</el-button>
                <el-button :icon="Delete" size="small" type="danger" plain>删除</el-button>
            </div>
        </el-table>
    </el-card>
</template>

<script>
import { reactive } from 'vue';
import { EditPen, CollectionTag, Delete, Top } from '@element-plus/icons-vue';

let data = reactive([
    {
        id: 1,
        title: "科技",
        releaseDate: "2022-03-27 00:06:04",
        updateDate: "2022-03-27 00:15:50",
    },
    {
        id: 2,
        title: " 电火花了",
        releaseDate: "2022-03-27 00:06:04",
        updateDate: "2022-03-27 00:15:50",
    },
])
</script>

<style lang='less' scoped>
.el-image {
    width: 60px;
    height: 45px;
    border-radius: 3px;
}

.btns {
    display: flex;
    justify-content: flex-start;
}

.el-card {
    margin-right: 5px;
}

.el-table {
    font-size: 12px;
}
</style>
